<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 全局组件 -->
			<my-componet nikename="admin" propsr="abc" age="17" v-bind:list="list"></my-componet>
			<!-- 局部组件 -->
			<local-component></local-component>

		</div>

		<template id="template">
			<div>
				<input type="number" v-model="n" />
				<button type="button" @click="add">add</button>
				<button type="button" @click="addN">addN</button>
				<p>显示点击数{{count}}</p>
				<p>登录名称:{{nikename}},年龄:{{age}}</p>
				<p v-for="item in list">{{item}}</br></p>
			</div>
		</template>
		<template id="local-template">
			<div>
				这是一个局部组件
			</div>
		</template>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//全局创建
			//my-component是组件名称
			//{options}
			//1、template html标签
			//2、props传递的参数 
			//父->子传参 属性传参
			//3、methods
			//4、组件生命周期的钩子created，attached
			Vue.component('my-componet', {
				template: '#template',
				data: function() {
					return {
						count: 0,
						n:0
					}
				},
				props:{
					//基础类型，输入什么都可以
					propsA:'null',
					//多种类型：字符串，数字
					propsM:[String,Number],
					//必须传值
					propsr:{
						type:String,
						required:true
					},
					//有默认值
					propsD:{
						type:Number,
						default:100
					},
					//对象|数组的默认值,使用方法返回默认值
					propsO:{
						type:Object,
						default:function(){
							return null;
						}
					},
					//双向绑定
					propsT:{
						twoWay:true
					},
					//自定义验证
					// age:{
					// 	validator:function(){
					// 		return value>10
					// 	}
					// }
				}
				,
				methods:{
					add(){
						this.$data.count++;
					},
					addN(){
						let n=this.$data.n;
						this.$data.count+=parseInt(n);
					}
				}
			})

			let app = new Vue({
				el: '#app',
				data: {
					list:[1,2,3,4]
				},
				components: {
					//局部创建的组件
					'local-component': {
						template: '#local-template'
					}
				},methods:{
					add(){
						console.log('add11')
					}
				}
			})
		</script>

	</body>


</html>
